<template>
  <div class="home">
    <!-- bg-img -->
    <Bg></Bg>
    <!-- login -->
    <!-- form -->
    <van-form
      class="form"
      @submit="onSubmit"
    >
      <div class="title2">您已成功注册eCASC会员！</div>
      <div class="list">
        <van-field
          v-model="userName"
          class="user"
          clearable
          label-class="label"
          label="账 &nbsp;户 &nbsp;名"
          placeholder="航小天"
        />
        <span class="line"></span>
      </div>
      <div class="list list1">
        <van-field
          v-model="pw"
          class="pw"
          clearable
          label-class="label"
          label="初始密码"
          placeholder="123456"
        />
        <span class="line"></span>
      </div>
      <div class="btn">
        <van-button
          class="btn_sub"
          color="#2683FA"
          text="立即注册"
          size="large"
          native-type="submit"
        >登录eCASC手机端</van-button>
      </div>
    </van-form>
    <!-- foot -->
    <div class="foot">
      <div>注册若出现问题，可联系客服热线</div>
      <div class="telephone">400-678-2050</div>
    </div>
  </div>
</template>

<script>
// @ is an alias to /src
import Bg from '@/components/Bg.vue'
import { Form, Field, Button } from 'vant'
// import instance from '@/request/index'
// console.log(loginRequest)
export default {
  name: 'Success',
  components: {
    Bg,
    VanForm: Form,
    VanField: Field,
    VanButton: Button
  },
  data() {
    return {
      userName: '',
      pw: ''
    }
  },
  methods: {
    onSubmit() {
      // console.log(process.env)
      this.$router.push({ name: 'Down' })
      // loginRequest() // 测试代理是否成功
      // instance.post('/api/oss/customer/v1/registration/sendSms').then(res => { console.log(res) })
    }
  }
}
</script>
<style lang="scss" scoped>
.home {
  position: relative;
}
.bg_img {
  width: 3.75rem;
  height: 2.75rem;
  background-image: url('../assets/register/矩形 5@2x.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.close {
  display: inline-block;
  width: 0.13rem;
  height: 0.13rem;
  position: absolute;
  /* border: 1px solid red; */
  left: 0.19rem;
  top: 0.57rem;
  background: url('../assets/register/关闭@2x.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
.title {
  position: absolute;
  left: 1.46rem;
  top: 0.57rem;
  color: #ffffff;
  font-size: 0.18rem;
  font-weight: Regular;
  /* line-height: .32rem; */
  text-align: center;
}
.more {
  display: inline-block;
  width: 0.27rem;
  height: 0.27rem;
  position: absolute;
  top: 0.5rem;
  left: 3.36rem;
  background-image: url('../assets/register/更多@2x.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}
/* form */
.form {
  width: 702px;
  height: 702px;
  background: #ffffff;
  position: absolute;
  z-index: 1999;
  left: 24px;
  top: 462pxrem;
  border-radius: 10px;
  /* border: 1px solid red; */
}
.form .title2 {
  color: #2683fa;
  font-size: 30px;
  text-align: center;
  position: absolute;
  left: 175px;
  top: 52px;
  font-weight: 'Regular';
  font-family: 'Source Han Sans CN';
}
.form .list {
  position: absolute;
  left: 42px;
  top: 132px;
  border: 2px solid #e5e5e5;
  background-color: #f4f4f4;
  opacity: 1;
}
.form .user {
  font-size: 30px;
  padding-top: 26px;
  padding-left: 26px;
  color: red;
  width: 622px;
  height: 80px;
}
.form .pw {
  font-size: 30px;
  padding-top: 26px;
  padding-left: 26px;
  color: red;
  width: 622px;
  height: 80px;
}
.form .list1 {
  top: 232px;
}
.form .line {
  width: 2px;
  height: 36px;
  border-left: 2px solid #c1c1c1;
  box-sizing: content-box;
  position: absolute;
  left: 178px;
  top: 28px;
}
.form .btn {
  width: 622px;
  height: 80px;
  position: absolute;
  left: 42px;
  top: 362px;
}
.form .btn_sub {
  width: 622px;
  height: 80px;
  font-size: 30px;
}
/* foot */
.foot {
  width: 360px;
  height: 78px;
  position: absolute;
  left: 190px;
  top: 1434px;
  font-size: 24px;
  font-weight: Regular;
  line-height: 50px;
  color: #999999;
  text-align: center;
}
.foot .telephone {
  color: #2683fa;
}
</style>
